<template>
  <div class="reating-content">
      <div class="top">
          <div @click="select(2)" :class="{'selectall':selectedtype===2}" class="buttom1 all"><span class="text">{{desc.all}}</span></div>
          <div @click="select(0)" :class="{'selectsatisfied':selectedtype===0}" class="buttom2 satisfied"><span class="text">{{desc.satisfied}}</span></div>
          <div @click="select(1)" :class="{'selectdissatisfied':selectedtype===1}" class="buttom3 dissatisfied"><span class="text">{{desc.dissatisfied}}</span></div>
      </div>
      <div class="center">
          <div @click="onlycontentclick" class="only-content">
              <span :class="{'onlytext':onlycontent===true}" class="iconfont">&#xe619;</span>
              <span class="text">只看有内容的评价</span>
          </div>
      </div>
  </div>
</template>

<script>

// import BScroll from 'better-scroll'
export default {
  name: 'ReatingSelect',
  data () {
    return {

    }
  },
  props: {
    desc: {
      type: Object,
      default () {
        return {
          all: '全部',
          satisfied: '满意',
          dissatisfied: '不满意'
        }
      }
    },
    selectedtype: Number,
    onlycontent: Boolean,
    reating: {
      type: Array
    }
  },
  mounted () {

  },
  methods: {
    select (type) {
      this.$emit('select', type)
    },
    onlycontentclick () {
      this.$emit('onlycontenttext')
    }
  },
  computed: {

  }
}
</script>

<style scoped lang="scss">
   .reating-content{
    //    background-color: rgb(211, 55, 55);
       .top{
           display: flex;
           padding: 18px 0;
           margin: 0 16px;
           border-bottom: 1px solid darkgrey;
           .buttom1,.buttom2,.buttom3{
               width: 58px;
               height: 38px;
               background-color: rgb(73, 180, 212);
               display: flex;
               justify-content: center;
               align-items: center;
               &.all{
                   background-color: rgb(154, 203, 231);
               }
               &.satisfied{
                   background-color: rgb(186, 226, 245);
               }
               &.dissatisfied{
                   background-color: rgb(171, 196, 207);
               }
               &.selectall{
                   background-color: rgb(21, 153, 241);
               }
               &.selectsatisfied{
                   background-color: rgb(21, 153, 241);
               }
               &.selectdissatisfied{
                   background-color: rgb(21, 153, 241);
               }
               .text{
                   color: white;
               }
           }
           .buttom2,.buttom3{
               margin-left: 18px;
           }
       }
       .center{
           padding: 14px 14px;
           border-bottom: 1px solid darkgray;
           .only-content{

               .iconfont{
                   font-size: 20px;
                   color: darkgray;
                   margin-right: 10px;
                   &.onlytext{
                   color: rgb(3, 110, 39);
               }
               }
               .text{}
           }
       }

   }
</style>
